<!--
 * @Description: 地图选择组件
 * @Author: Caroline
 * @Date: 2024-01-29 21:10:32
 * @LastEditTime: 2024-02-21 17:54:10
 * @LastEditors: Caroline
 * @FilePath: \ronghe-web\src\components\tencent-map-select\index.vue
-->
<template>
  <div>
    <el-dialog v-model="isVisible" title="选择地址" width="700px">
      <iframe id="mapPage" width="100%" height="100%" frameborder="0" :src="src" allow="geolocation"></iframe>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="onCancel">取消</el-button>
          <el-button type="primary" @click="onConfirm"> 确定 </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref, computed, getCurrentInstance, onUnmounted, watch } from "vue";
import useTencentMap from "@/hooks/useTencentMap";

type AddressInfo = {
  lng: string | number;
  lat: string | number;
  address: string;
};

const { proxy } = getCurrentInstance() as any;

const props = defineProps<{
  modelValue: boolean;
  position?: { lat: number | string; lng: number | string };
}>();

const emits = defineEmits<{
  (e: "update:modelValue", val: boolean): void;
  (e: "selectSuccess", val: AddressInfo): void;
}>();

const isVisible = computed({
  get() {
    return proxy.modelValue;
  },
  set(val) {
    emits("update:modelValue", val);
  }
});

const addressInfo = ref({
  lat: "",
  lng: "",
  address: ""
});

const { tencentMapConfig, getLocation } = useTencentMap();

const prevSrc = `https://apis.map.qq.com/tools/locpicker?type=1&key=${tencentMapConfig.GEO_KEY}&policy=1&referer=${tencentMapConfig.GEO_REFERER}`;

const src = ref(prevSrc);

const onCancel = () => {
  isVisible.value = false;
};
const onConfirm = () => {
  isVisible.value = false;
  emits("selectSuccess", addressInfo.value);
};

onMounted(() => {
  init();
});

const init = async () => {
  let coordParams = "";
  try {
    const { lat, lng } = await getLocation();
    console.log("初始化地图组件--当前位置经纬度=", lat, lng);
    coordParams = `&coord=${lat},${lng}`;
  } catch (err) {
    // DO NOTHING
  }
  src.value = `${prevSrc}${coordParams}`;

  window.addEventListener("message", messageListenerCb, false);
};
const messageListenerCb = function (event: any) {
  // 接收位置信息，用户选择确认位置点后选点组件会触发该事件，回传用户的位置信息
  var loc = event.data;
  if (loc && loc.module == "locationPicker") {
    //防止其他应用也会向该页面post信息，需判断module是否为'locationPicker'
    console.log("location", loc);

    addressInfo.value = {
      lat: loc.latlng.lat,
      lng: loc.latlng.lng,
      address: loc.poiaddress
    };
  }
};
watch(
  () => props.position,
  (val) => {
    console.log("编辑进入-监听任务已选择的位置=", val);
    // TODO:编辑时取传入的经纬度
    // src.value = `${prevSrc}&coord=${val.lat},${val.lng}`;
  }
);

onUnmounted(() => {
  window.removeEventListener("message", messageListenerCb);
});
</script>

<style lang="scss" scoped>
:deep(.el-dialog) {
  .el-dialog__body {
    height: 70vh;
  }
}
</style>
